import "./index.scss"
import {songsType} from "@src/services/music.ts"
import PlayBtn from "@src/components/playBtn"
import {formatTime} from "@src/utils/date.ts"
import {useRef, useState} from "react";

interface MusicCardProps {
    songs: songsType
}

export default function MusicCard({songs}: MusicCardProps) {
    const childRef = useRef<HTMLDivElement>(null);
    const MusicCardBtn = () => {
        if (childRef.current) {
            childRef.current.click()
        }
    }
    const [isPlaying, setIsPlaying] = useState(false)

    return <div className={`MusicCard ${isPlaying && "MusicCard-active"}`} onClick={MusicCardBtn}>
        <div>
            <img className="userHead" src={songs.al.picUrl} alt=""/>
        </div>
        <div>
            <h4 className="text-overflow-1">{songs.name}</h4>
            <p>{songs.ar[0].name} <span>{formatTime(songs.dt)}</span></p>
        </div>
        <div className="centered"><PlayBtn songs={songs} ref={childRef} onChangePlay={(b) => setIsPlaying(b)}></PlayBtn>
        </div>
    </div>
}